<template>
  <div class="shopcart" v-show="show" @click="show=false">
    <div class="content" @click.stop="">
        <div class="title">
            <span>已选商品</span>
            <span>清空</span>
        </div>
        <div class="list">
            <!-- <div class="good" v-for="(item,index) in filter_shopcartlist()" :key="index"> -->
            <div class="good" v-for="(item,index) in shopcartlist" :key="index">
                <div class="img-box">
                    <img :src="item.picture" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="price">¥{{item.min_price}}</div>
                    <div class="ope">
                        <span class="minus" @click="minus(item)">-</span>
                        <span class="num">{{item.count}}</span>
                        <span class="add" @click="add(item)">+</span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {mapActions} from 'vuex'
import mixins from '../mixins/index'

export default {
    props:['taglist'],
    data(){
        return {
            show:false
        }
    },
    computed:{
        ...mapState('sl',['shopcartlist'])
    },
    methods:{
        //判断 当前商品是否在当前店铺中, 返回 true 或 false
        isshop(good){
            //获取当前店铺的商品  this.taglist  (是个二维数组)
            //获取当前商品 good
            
        },
        //过滤出当前用户购物车列表中属于当前店铺的商品列表
        filter_shopcartlist(){
            //获取当前用户购物车列表  this.shopcartlist
            return this.shopcartlist.filter((item)=>{
                return this.isshop(item);
            })
        },
        ...mapActions('sl',['request_add_shopcart','request_minus_shopcart']),
    },
    //混入
    mixins:[mixins],
}
</script>

<style lang='scss'>
.shopcart{
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    .content{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: white;
        .title{
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 40px;
        }
        .list{
            margin-bottom: 60px;
            .good{
                display: flex;
                position: relative;
                margin: 10px 0;
                .img-box{
                    width: 80px;
                    margin-right: 10px;
                    img{
                        width: 100%;
                    }
                }
                .text{
                    flex:1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .ope{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        span{
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            text-align: center;
                            line-height: 16px;
                            color: white;
                            background-color: skyblue;
                            margin-left: 10px;
                        }
                        span.minus{
                            background-color: white;
                            border: 1px solid skyblue;
                            color: skyblue;
                        }
                        span.num{
                            color: black;
                            background-color: white;
                        }
                    }
                }
            }
        }
    }
}
</style>